<template>
    <div class="main-wrapper">
      <div class="node-container">
        <!--工具条-->
        <div class="search-wrap">
          <div class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters" size="small">
              <el-form-item>
                <el-input
                  v-model="filters.node_name"
                  clearable
                  placeholder="请输入节点名称"
                >
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-input
                  v-model="filters.node_ip"
                  clearable
                  placeholder="请输入节点IP"
                >
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-select clearable v-model="filters.node_type" placeholder="请选择类型">
                  <el-option v-for="item in nodeTypeOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div class="operaution-btn-group" >
              <el-button
                  size="small"
                  type="primary"
                  @click="handleAddNode"
                >添加节点
              </el-button>
          </div>
          </div> 
          <!-- 表格数据 -->
          <MyTable 
            ref="nodeTable"
            currentTable ="nodeTable"
            :hasSelection="false"
            :tableData="nodeData" 
            :tableItem="columns"
            :total="total"
            @handlePageChange="handlePageChange"
            />
        </div>
        <CreateNodeDialog :showModal="isShowModal" @closeDialog="closeDialog" @handleDialogSubmit="submitCreateNode"/>
    </div>
  </template>
  <script>
  import {v4 as uuid} from "uuid"
  import { nodeTypeOptions } from '@/business/const'
  import {fetchNodeList ,createNode } from '@/api/node'
  import MyTable from '@/components/MyTable'
  import CreateNodeDialog from './components/CreateNodeDialog.vue'
    export default {
      components: { MyTable, CreateNodeDialog},
      data(){
        return{
          filters: {
            node_name: '',
            node_ip: '',
            node_type: ''
          },
          nodeTypeOptions: nodeTypeOptions,
          nodeData: [],
          columns: [
            {
              name: '节点名称',
              prop: 'node_name',
              width: '400px'
            },
            {
              name: '节点ID',
              prop: 'id',
              width: '400px'
            },
            {
              name: '节点IP',
              prop: 'node_ip',
              width: '400px'
            },
            {
              name: '类型',
              prop: 'node_type',
              width: ''
            },
          ],
          total: 0,
          pageIndex: 1,
          pageSize: 20,
          isShowModal: false
        }
      },
      watch: {
        filters:{
          deep:true,
          handler(newVal){
            this.getList()
          }
        }
      },
      mounted(){
        this.nodeData = []
        this.getList()
      },
      methods: {
        // get node list
        getList(){
          const params = {
            page_num: this.pageIndex,
            page_size: this.pageSize,
          }
          let reqParams = Object.assign(params,this.filters)
          fetchNodeList(reqParams).then((res) => {
            if(res && res.data){
              this.total = res.total
              this.nodeData = res.data
            }
          }).catch(err => {
            this.$message.error(err)
          })
        },
        // 添加节点
        handleAddNode(){
          this.isShowModal = true
        },
        closeDialog(){
          this.isShowModal = false
        },
        submitCreateNode(data){
          let params ={...data, id: uuid()}
          createNode(params).then(res => {
            this.$message.success('添加节点成功！')
            this.getList()
          })
          this.isShowModal = false
        },
        // 切换pagesize 、切换页码
        handlePageChange(pageData) {
          this.pageIndex = pageData.page_num
          this.pageSize = pageData.page_size
          this.getList()
        },
      }
    }
  </script>
  <style lang="scss" scoped>
  
  </style>